<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      class="backgroundImage"
      ref="paging"
      :auto="false"
      @scroll="scroll"
      :refresher-enabled="true"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#D1EFF0' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base line-clamp-1"> {{ isScroll ? d.nickname : '' }} </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <image src="/static/dddr106.png" mode="aspectFill" @click="showShare = true" class="size-6" />
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty :text="emptyText" :url="emptyUrl"></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="flex flex-col gap-3 p-4">
        <!-- 头像 -->
        <view class="flex justify-between">
          <view class="flex gap-3 items-center">
            <view class="size-[3.25rem] rounded-full border border-white overflow-hidden flex-none">
              <u-image class="!size-full" shape="circle" :src="vk.myfn.handleImageUrl(d.avatar)"></u-image>
            </view>
            <view class="flex flex-col">
              <view class="text-[1.125rem] text-[#000000] font-bold line-clamp-2">
                {{ d.nickname || '未设置昵称' }}
              </view>
              <view class="text-[.75rem] text-[#5C6068]"> ID：{{ d.uid || '' }} </view>
            </view>
          </view>
        </view>
        <!-- 简介 -->
        <view class="flex items-center">
          <view class="text-[.8125rem]" :class="d.motto ? 'text-[#161A24]' : 'text-[#8E9299]'">
            {{ d.motto || 'Ta还没有设置签名' }}
          </view>
        </view>
        <view>
          <view class="flex gap-1 items-center">
            <view
              class="bg-[#FFFFFF] rounded-[.25rem] px-1 py-[.125rem] text-[.625rem] text-[#161A24]"
              v-if="[1, 2].includes(d.gender)"
            >
              {{ d.gender === 1 ? '男' : d.gender === 2 ? '女' : '未知' }}
            </view>
            <view class="bg-[#FFFFFF] rounded-[.25rem] px-1 py-[.125rem] text-[.625rem] text-[#161A24]" v-if="d.age">{{
              d.age ? `${d.age}岁` : '未知'
            }}</view>
            <view class="bg-[#FFFFFF] rounded-[.25rem] px-1 py-[.125rem] text-[.625rem] text-[#161A24]" v-if="areat()">
              {{ areat() }}
            </view>
          </view>
        </view>
      </view>
      <!-- 列表 -->
      <view
        class="rounded-t-[1rem] from-[#FEFEFE] p-4 to-[#F4F6F8] bg-gradient-to-b flex flex-col gap-3"
        v-if="!d.is_blacklist && !d.to_blacklist"
      >
        <view class="flex gap-6 items-center">
          <view
            v-for="(i, k) in list"
            class="flex flex-col gap-1 justify-start items-center"
            :key="k"
            @click="switchCategories(k)"
          >
            <text class="text-[1rem]" :class="current === k ? 'font-bold text-[#0d111a]' : ' text-[#8E9299]'">
              {{ i }}
            </text>
            <image src="/static/dddr74.png" v-if="current === k" class="w-[1.125rem] h-[.25rem]" mode="aspectFill" />
            <view v-else class="w-[1.125rem] h-[.25rem]"></view>
          </view>
        </view>
        <view class="flex flex-col gap-3">
          <view
            v-for="(i, k) in dataList"
            :key="k"
            class="flex gap-2 bg-white shadow-[0rem_.125rem_1.5rem_0rem_rgba(12,27,76,0.04)] p-4 pb-2 rounded-[.75rem] flex-col"
            @click="jumpDetails(i)"
          >
            <view class="flex gap-2 items-center h-[7.3125rem]">
              <view class="w-[5.5rem] flex-none relative h-full">
                <view class="overflow-hidden rounded-[.5rem] size-full">
                  <u-image :src="vk.myfn.handleImageUrl(i.thumb)" mode="aspectFill" class="!size-full" />
                </view>
                <image
                  v-if="i.is_paid_spot == 1 && i.is_paid == 0"
                  src="/static/dddr87.png"
                  class="h-[1.0625rem] absolute -left-[.1875rem] -top-0"
                  mode="heightFix"
                />
                <image
                  v-if="i.is_paid_spot == 1 && i.is_paid == 1"
                  src="/static/dddr86.png"
                  class="h-[1.0625rem] absolute -left-[.1875rem] -top-0"
                  mode="heightFix"
                />
                <view class="size-full flex absolute inset-0 flex-col flex-grow justify-between p-1">
                  <view></view>
                  <view class="flex justify-between items-center">
                    <view
                      v-for="(img, imgIndex) in i?.images.slice(0, 3)"
                      :key="imgIndex"
                      class="relative"
                      :class="imgIndex > 0 ? '-ml-3' : ''"
                    >
                      <view
                        class="size-[1.5rem] rounded-[.3125rem] border relative z-[1] overflow-hidden"
                        :style="`z-index: ${3 - imgIndex};`"
                      >
                        <u-image :src="img" class="!size-full" mode="aspectFill" />
                      </view>
                    </view>
                    <view class="text-[.875rem] text-transparent ml-1">+{{ i?.images.length }}</view>
                  </view>
                </view>
              </view>
              <view class="flex flex-col justify-between w-full h-full">
                <view class="flex justify-between items-center">
                  <view class="text-[1rem] text-[#161A24] font-bold line-clamp-1">{{ i.name }}</view>

                  <view class="px-[.4375rem] py-[.1875rem] rounded-full bg-[#F2F5F7]" v-if="i.distance">
                    <view class="text-[.625rem] text-[#5C6068] font-bold">
                      {{ i.distance }}
                    </view>
                  </view>
                </view>
                <view class="text-[.8125rem] text-[#5C6068] line-clamp-1"> {{ i.description }} </view>
                <view class="flex flex-wrap gap-1 items-center">
                  <view
                    v-for="(i, k) in i?.ext?.fish_species || []"
                    :key="k"
                    class="px-[.375rem] py-[.0625rem] bg-[#F2F5F7] rounded-[.25rem]"
                  >
                    <view class="text-[.625rem] text-[#5C6068]"> {{ i.name }} </view>
                  </view>
                </view>
                <view class="flex justify-between items-center">
                  <view class="flex items-center text-[.6875rem] text-[#5C6068] gap-1">
                    <view class="flex items-center">
                      <image
                        :src="vk.myfn.handleImageUrl(i.weather?.lives?.[0]?.item)"
                        mode="aspectFill"
                        class="!size-[.875rem]"
                      />
                      <text class="ml-[.125rem]">{{ i.weather?.lives?.[0]?.weather || '未知天气' }}</text>
                    </view>
                    <text class="h-[.5rem] border-l border-solid border-[#C1C4C9]"></text>
                    <text>{{ i.weather.lives[0].temperature }}°C</text>
                    <text class="h-[.5rem] border-l border-solid border-[#C1C4C9]"></text>
                    <text>{{ i.weather?.lives[0]?.district || '未知区域' }}</text>
                  </view>
                  <view class="flex relative justify-end">
                    <view
                      class="bg-gradient-to-r from-[#FFBF3A]/30 to-white h-[.375rem] w-[115%] absolute rounded-[.1875rem] bottom-1 z-20"
                    >
                    </view>
                    <view class="flex relative z-20 items-baseline gap-[0.0625rem]">
                      <text class="font-[oxanium] text-[1.125rem] text-[#002021] font-bold">{{
                        (i.score || 0).toFixed(1)
                      }}</text>
                      <text class="text-[.625rem] text-[#002021]">分</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <u-line />

            <!-- 免费 -->
            <view class="flex justify-between items-center" v-if="!i?.is_paid_spot || i?.is_paid">
              <view class="flex gap-1 items-center">
                <image src="/static/dddr17.png" class="size-4" mode="aspectFill" />
                <view class="text-[.6875rem] text-[#5C6068]">{{ i.location_name }}</view>
              </view>
              <image src="/static/dddr47.png" class="size-7" mode="aspectFill" />
            </view>
            <view class="flex justify-between items-center" v-if="i.is_paid_spot && !i.is_paid">
              <view class="flex gap-1 items-center">
                <view class="flex items-center">
                  <view
                    class="size-5 flex overflow-hidden justify-center items-center -ml-2 bg-gray-200 rounded-full border"
                    :style="`z-index: ${5 - k};`"
                    v-for="(i, k) in i.purchased_users.slice(0, 3)"
                    :key="k"
                  >
                    <image
                      :src="i.avatar ? vk.myfn.handleImageUrl(i.avatar) : '/static/dddr103.png'"
                      class="size-full"
                      mode="aspectFill"
                    />
                  </view>
                </view>
                <view class="text-[.6875rem] text-[#00A9AB]" v-if="i.sold_count">{{ i.sold_count }}人已解锁该钓点</view>
                <view class="flex gap-1 items-center" v-else>
                  <image src="/static/dddr131.png" mode="aspectFill" class="size-4" />
                  <view class="text-[.6875rem] text-[#00A9AB]">解锁此钓点查看视频指路</view>
                </view>
              </view>
              <view @click.stop="buyNow(i)">
                <yy-amountBtn :paid_amount="i.paid_amount"></yy-amountBtn>
              </view>
            </view>
          </view>
        </view>
      </view>
    </yy-paging>
    <yy-share
      :shareList="shareList"
      :showShare="showShare"
      @update:showShare="showShare = $event"
      @handleShare="handleShare"
    ></yy-share>
    <!--  付费 -->
    <yy-buy
      v-model="modelValue"
      :modelValueData="modelValueData"
      @update:modelValue="modelValue = $event"
      @paySuccess="paySuccess"
    ></yy-buy>
    <!-- 弹框 -->
    <yy-alert ref="alert" @alertConfirm="alertConfirm"></yy-alert>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 列表数据
        automatic: false, // 是否自动加载
        list: ['全部', '手杆', '路亚', '付费'], // 分类列表
        current: 0, // 当前选中的分类索引
        user_id: '', // 用户ID
        d: {}, // 用户详情数据
        title: '', // 标题
        showShare: false, // 是否显示分享弹窗
        shareList: [], // 分享列表
        emptyText: '', // 空状态文本
        emptyUrl: '', // 空状态图片
        modelValue: false, // 是否显示购买弹窗
        modelValueData: {} // 购买弹窗数据
      }
    },
    // is_paid_spot  basan_type

    onLoad(options) {
      this.user_id = options.id
    },
    onShow() {
      setTimeout(() => {
        this.getOtherHome()
      }, 0)
    },

    methods: {
      areat() {
        const userInfo = this.d
        // 如果省市相同则只显示一个,不同则用-连接
        if (userInfo.province && userInfo.city) {
          return userInfo.province === userInfo.city ? userInfo.province : `${userInfo.province}-${userInfo.city}`
        }
        return ''
      },
      jumpDetails(i) {
        vk.navigateTo({
          url: `/pages/index/details?id=${i.id}`,
          events: {
            update: data => {
              this.$refs.paging.refresh()
            }
          }
        })
      },

      paySuccess() {
        this.modelValue = false
        this.$refs.paging.refresh()
      },
      buyNow(i) {
        if (vk.myfn.isLogin()) {
          this.modelValue = true
          this.modelValueData = i
        }
      },
      // 复制链接
      async copyLink() {
        vk.myfn.copyToClipboard('复制复制复制复制复制复制复制').then(() => {
          vk.toast('复制成功')
        })
      },

      async handleShare(item) {
        this.showShare = false
        // 使用 switch 语句优化分支逻辑
        switch (item.name) {
          case '复制链接':
            await this.copyLink()
            break
          case '举报用户':
            vk.navigateTo(`/pages/my/report?id=${this.user_id}&type=2`)
            break
          case '拉黑用户':
            this.blockUsers()
            break
          case '取消拉黑':
            this.cancelBlackout()
            break
          default:
            console.log('未处理的分享类型:', item.name)
        }
      },
      async cancelBlackout() {
        this.$refs.alert.config({
          show: true,
          title: '取消拉黑',
          describe: '确定要取消拉黑该用户吗？取消后对方将可以查看你的钓点并与你互动。',
          cancel: '再想想',
          cancelColor: '#000',
          confirm: '确定',
          confirmColor: '#FF3A56',
          eventType: 'cancelBlackout'
        })
      },
      async alertConfirm(eventType) {
        switch (eventType) {
          case 'cancelBlackout':
            let dd = await api.unBlackUser({
              target_id: this.user_id
            })
            vk.toast(dd.msg, 300, e => {
              this.getOtherHome()
            })
            break
          case 'blockUsers':
            let d = await api.blackUser({
              target_id: this.user_id
            })
            vk.toast(d.msg, 300, e => {
              this.getOtherHome()
            })
            break
          default:
            console.log('未知的确认事件类型:', eventType)
        }
      },

      async blockUsers() {
        this.$refs.alert.config({
          show: true,
          title: '拉黑Ta',
          describe: '对方将无法查看你的钓点，也无法与你互动。对方不会收到被拉黑的通知',
          cancel: '取消',
          cancelColor: '#000',
          confirm: '拉黑',
          confirmColor: '#FF3A56',
          eventType: 'blockUsers'
        })
      },
      goToDetails(i) {
        vk.navigateTo(`/pages/index/details?id=${i.id}`)
      },
      async getOtherHome() {
        const {
          data: { user }
        } = await api.getOtherHome({ user_id: this.user_id })

        this.d = user
        if (user.is_blacklist && user.to_blacklist) {
          this.emptyText = '暂无访问权限'
          this.emptyUrl = '/static/dddr109.png'
        } else if (user.to_blacklist) {
          this.emptyText = '暂无访问权限'
          this.emptyUrl = '/static/dddr109.png'
        } else if (user.is_blacklist) {
          this.emptyText = '你已拉黑对方，无法查看Ta的内容'
          this.emptyUrl = '/static/dddr108.png'
        } else {
          this.emptyText = '该用户没有发布任何钓点'
          this.emptyUrl = '/static/dddr102.png'
        }
        this.$refs.paging.refresh()

        const isCurrentUser = vk.getVuex('$user.userInfo.id') == this.user_id
        const baseShareList = [{ name: '复制链接', icon: 'dddr43' }]
        console.log('isCurrentUser==> ', isCurrentUser)
        if (!isCurrentUser) {
          baseShareList.push(
            { name: '举报用户', icon: 'dddr56' },
            { name: user.is_blacklist ? '取消拉黑' : '拉黑用户', icon: 'dddr107' }
          )
        }

        this.shareList = baseShareList
      },
      switchCategories(k) {
        this.selectedTags = []
        this.current = k
        vk.showLoading('加载中...')

        this.$refs.paging.reload()
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        const params = {
          user_id: this.user_id,
          // page,
          // limit,
          ...(this.current === 1 && { basan_type: 1 }),
          ...(this.current === 2 && { basan_type: 2 }),
          ...(this.current === 3 && { is_paid_spot: 1 })
        }

        const res = await api.getBasanList(params)
        this.$refs.paging.setLocalPaging(this.d.is_blacklist || this.d.to_blacklist ? [] : res.data)
        vk.hideLoading()
      }
    }
  }
</script>

<style lang="scss" scoped>
  html,
  .backgroundImage,
  page {
    background-image: url('/static/dddr65.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: top !important;
    background-color: #f4f6f8 !important;

    // background-attachment: fixed !important;
  }
</style>
